<template>
  <div id="rank-list">
    <div class="official">
      <div class="font-20 font-weight">官方榜</div>
      <Official :topList="officialList" />
    </div>
    <div class="global">
      <div class="font-20 font-weight">全球榜</div>
      <ContentCard :dataList="globalList" @goDetail="goDetail" />
    </div>
  </div>
</template>

<script>
import Official from './Official';
import { topList, playDetail } from '@/api';
import ContentCard from '@/components/Content/ContentCard';

export default {
  name: 'RankList',

  components: {
    Official,
    ContentCard
},

  data() {
    return {
      // 官方榜
      officialList: [],
      // 全球榜
      globalList: [],
    };
  },

  created() {
    this.getTopList();
  },

  methods: {
    async getTopList() {
      const res = (await topList()).data;
      res.list.filter(async item => {
        // 区分官方榜和全球榜
          if (item.ToplistType) {
            const result = (await playDetail(item.id)).data;
            this.officialList.push(result.playlist);
            return;
          }
          this.globalList.push(item);
      });
    },
    goDetail(id) {
      this.$router.push({
        name: 'playlistdetail',
        query: { id }
      })
    }
  },
};
</script>

<style lang="less" scoped>
#rank-list {
  /deep/span.ant-skeleton-avatar-square {
    width: 160px;
    height: 160px;
  }
  /deep/h3.ant-skeleton-title {
    margin-top: 0;
  }
}
</style>